<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-app="{scope}">
				<div>{{ filterplatForm(scope.row.app) }}</div>
			</template>
			<template #slot-copy="{scope}">
				<el-button type="text" @click="copyData(scope.row)">复制</el-button>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import platform from '@/mixin/platform';
import stores from '@/utils/store';
import moment from 'moment';
export default {
	data() {
		return {};
	},
	mixins: [platform],
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.turntable.turntable)
				.permission({
					update: true,
					delete: true,
					add: true
				})
				.set('dict', {
					label: {
						add: '添加配置'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '数据平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: 'sdk平台',
							prop: 'sdkType',
							align: 'center'
						},
						{
							label: '中奖数量',
							prop: 'number',
							align: 'center'
						},

						{
							label: '复制文案',
							prop: 'copyText',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '淘宝文案',
							prop: 'tbText',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '奖品显示倒计时',
							prop: 'countdown',
							align: 'center'
						},
						{
							label: '淘口令',
							prop: 'tkl',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '日期',
							prop: 'date',
							align: 'center',
							emptyText: '通用'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '修改时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'delete', 'slot-copy']
					}
				})
				.set('upsert', {
					sync: true,
					props: {
						width: '800px',
						labelWidth: '130px'
					},
					items: [
						{
							label: '数据平台',
							prop: 'app',
							span: 13,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台',
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: this.options,
								on: {
									change: e => {
										this.appPlat = e;
										this.changePrize(e);
									}
								}
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							label: 'sdk平台',
							prop: 'sdkType',
							span: 13,
							component: {
								name: 'el-select',
								options: [
									{
										label: 'yzf',
										value: 'yzf'
									},
									{
										label: 'km',
										value: 'km'
									},
									{
										label: 'wx',
										value: 'wx'
									},
									{
										label: 'h5',
										value: 'h5'
									}
								]
							},
							rules: {
								required: true,
								message: 'sdk平台'
							}
						},
						{
							label: '日期',
							prop: 'date',
							span: 13,
							component: {
								name: 'el-date-picker'
							}
						},
						{
							component: {
								name: 'date-tips',
								render() {
									return <div style="color:#F70114">不选择时间为通用</div>;
								}
							}
						},
						{
							label: '奖项',
							prop: 'prize',
							span: 13,
							value: [],
							component: {
								name: 'el-select',
								options: [],
								attrs: {
									placeholder: '请选择奖项',
									multiple: true
								}
							},
							rules: {
								required: true,
								message: '请选择奖项'
							}
						},
						{
							prop: 'countdown',
							label: '倒计时（秒）',
							value: 10,
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0
								}
							},
							rules: [
								{
									required: true,
									message: '请输入金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'copyText',
							label: '复制文案',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入复制文案'
								}
							}
						},
						{
							prop: 'tbText',
							label: '淘宝文案',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入淘宝文案'
								}
							}
						},
						{
							prop: 'tkl',
							label: '淘口令',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入淘口令'
								}
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					if (isEdit) {
						app.setForm('prize', data.prize.split(','));
						this.changePrize(data.app);
					} else {
						app.setForm('app', stores.get('platForm'));
						if (data) {
							app.setForm('prize', data.prize.split(','));
							this.changePrize(data.app);
						} else {
							this.changePrize(stores.get('platForm'));
						}
					}
				})

				.on('submit', async (isEdit, data, { next }) => {
					console.log(data);
					if (isEdit) {
						let prize = data.prize.join();
						let { app, copyText, date, countdown, id, tbText, tkl, sdkType } = data;
						if (date) {
							date = moment(date).format('YYYY-MM-DD');
						} else {
							date = '';
						}
						next({
							app,
							copyText,
							countdown,
							date,
							id,
							tbText,
							tkl,
							prize,
							sdkType
						});
					} else {
						let prize = data.prize.join();
						let { app, copyText, date, countdown, tbText, tkl, sdkType } = data;
						if (date) {
							date = moment(date).format('YYYY-MM-DD');
						} else {
							date = '';
						}
						next({
							app,
							copyText,
							countdown,
							date,
							tbText,
							tkl,
							prize,
							sdkType
						});
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'add-btn',
						'multi-delete-btn',
						'flex1',
						'slot-select-type',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({});
		},
		copyData(val) {
			this.crud.append({
				...val,
				id: ''
			});
		},
		async changePrize(val) {
			let prizeList = await this.$service.turntable.turntablePrize.page({
				size: 100,
				page: 1,
				app: val
			});
			this.crud.setData(
				'upsert.items[prop:prize].component.options',
				prizeList.list.map(item => {
					return {
						label: item.name,
						value: item.id
					};
				})
			);
		}
	}
};
</script>
<style lang="stylus" scoped></style>
